<script>
import { Message } from "element-ui";
import citys from "../js/citydata.js";

export default {
  data() {
    return {
      //管理门店
      loading: false,
      dialogFormVisible: false,
      dialogTableVisible: false,
      IsRighht_addShop: false,
      multipleTable: [],
      shopSetData: {
        pageNum: 1,
        pageSize: 5,
        total: 100,
        shopName: "",
        communityId: "",
      },
      shopListData: [],
      //添加shop
      addShopList: [],
      addShopSet: {
        pageNum: 1,
        pageSize: 5,
        shopName: "",
        communityId: "",
      },

      //主页面
      communityName: "",
      communityMsg: {
        title: "添加小区",
      },
      community: {
        // 小区信息
        addOrUpdateFlag: 1, // 判断是新增还是修改的标志  1:新增  2：修改
        communityAddress: "", // 小区详细地址
        communityAreaCode: "", // 小区位置编码
        communityCity: "", // 小区所属城市
        communityCoordinates: "", // 小区所属详细地址--
        communityDistrict: "", // 小区所属区域
        communityId: "", // 小区编号
        communityLatitude: "", // 小区纬度
        communityLongitude: "", // 小区经度
        communityName: "", // 小区名称
        communityProvince: "", // 小区所属省份/直辖市
      },
      date: [],
      page: {
        // pageNum: 1,
        pageSize: 5,
        currentPage: 1,
        total: 100,
      },
      tableData: [],
      city: citys,
      address: [],
    };
  },
  methods: {
    //
    saveShops() {
      this.$http
        .post("/associatedStores/addAssociatedStores", {
          fendeShopCommunityList: this.multipleTable,
          panghuCommunityId: this.shopSetData.communityId,
        })
        .then((res) => {
          console.log(res.daata);
          if (res.data.status == 200) {
            Message({
              type: "success",
              message: "保存成功",
            });
            this.addShopGet();
            this.getShopList();
            this.get();
          } else {
            Message({
              type: "error",
              message: "保存失败",
            });
          }
        });
    },
    //删除关联门店
    deleteShop(val) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .post("/associatedStores/associatedStoresRemove", {
              panghuCommunityId: this.shopSetData.communityId,
              panghuShopId: val.shopId,
            })
            .then((res) => {
              if (res.data.status == 200) {
                Message({
                  type: "success",
                  message: "删除成功",
                });
              }
              this.getShopList();
              this.get();
            })
            .catch((e) => {
              console.log(e);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //添加关联门店
    handleSelectionChange(val) {
      // console.log(val);
      let list = new Array();
      for (let i = 0; i < val.length; i++) {
        list.push(val[i].shopId);
      }
      this.multipleTable = list;
      // console.log(this.multipleTable);
    },
    addShopGet() {
      this.$http
        .get("/associatedStores/findShopListByAdd", {
          params: this.addShopSet,
        })
        .then((res) => {
          console.log(res.data);
          let data = res.data.data;
          if (res.data.status == 200) {
            this.addShopList = data.list;
            this.addShopSet.total = data.total;
          }
        });
    },
    //添加关联门店的分页
    handleCurrentChange_addshop(val) {
      this.addShopSet.pageNum = val;
      console.log(this.addShopSet);

      this.addShopGet();
    },
    //清楚关联门店数据
    shopClear() {
      this.shopListData = [];
      this.shopSetData = {
        pageNum: 1,
        pageSize: 5,
        shopName: "",
        communityId: "",
      };
    },
    //获取关联门店数据
    getShopList() {
      this.$http
        .get("/associatedStores/associatedStoresList", {
          params: this.shopSetData,
        })
        .then((res) => {
          let data = res.data.data;
          // console.log(this.shopSetData);
          // console.log(data)
          if (res.data.status == 200) {
            this.shopListData = data.list;
            this.shopSetData.total = data.total;
          } else {
            Message({
              type: "error",
              message: "加载失败",
            });
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    //获取关联门店ID
    setShopId(id) {
      this.dialogTableVisible = true;
      this.shopSetData.communityId = id;
      this.addShopSet.communityId = id;
      this.getShopList();
    },
    //关联门店分页
    handleCurrentChange_shop(val) {
      this.shopSetData.pageNum = val;
      this.getShopList();
    },
    //主页面
    //清除数据
    clear() {
      this.community = {
        // 小区信息
        addOrUpdateFlag: 1, // 判断是新增还是修改的标志  1:新增  2：修改
        communityAddress: "", // 小区详细地址
        communityAreaCode: "", // 小区位置编码
        communityCity: "", // 小区所属城市
        communityCoordinates: "", // 小区所属详细地址--
        communityDistrict: "", // 小区所属区域
        communityId: "", // 小区编号
        communityLatitude: "", // 小区纬度
        communityLongitude: "", // 小区经度
        communityName: "", // 小区名称
        communityProvince: "", // 小区所属省份/直辖市
      };
      this.address = [];
      this.dialogFormVisible = false;
    },
    get() {
      this.loading = true;
      this.$http
        .get("/community/communityList?" + `name=`, {
          //pageNum=1&pageSize=10
          params: {
            communityName: this.communityName,
            pageNum: this.page.currentPage,
            pageSize: this.page.pageSize,
            startTime: this.date[0],
            endTime: this.date[1],
          },
        })
        .then((res) => {
          let data = res.data;
          // console.log(res.data);
          if (data.status == 200) {
            //对数据复制
            this.tableData = data.data.list;
            this.page.total = data.data.total;
            Message({
              type: "success",
              message: "数据获取成功",
            });
            this.loading = false;
          } else {
            Message("数据获取失败");
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    //设置添加小区
    setAdd() {
      this.community.addOrUpdateFlag = 1;
      this.communityMsg.title = "添加小区";
    },
    //设置更新小区信息
    setUpdate() {
      this.community.addOrUpdateFlag = 2;
      this.communityMsg.title = "修改小区信息";
    },
    //添加小区
    add() {
      console.log(this.community);
      this.$http
        .post("/community/communityUpdate", this.community)
        .then((res) => {
          console.log(res.data);
          if (res.data.status == 200) {
            Message({
              type: "success",
              message: "添加成功！",
            });
          } else {
            Message({
              type: "erroe",
              message: "添加失败！",
            });
          }
        })
        .catch((e) => {
          console.log(e);
        });
      this.clear();
      this.setAdd();
      setTimeout(() => {
        this.get();
      }, 1000);
      // this.get();
    },
    //获取地址经纬度
    getTude() {
      if (this.address.length == 0) {
        Message("请选择地址");
        return;
      }
      this.$http
        .get("https://restapi.amap.com/v3/geocode/geo", {
          params: {
            key: "457886b5972a97e93fb9cdccebfd450f",
            address:
              this.community.communityProvince +
              this.community.communityCity +
              this.community.communityDistrict +
              this.community.communityAddress,
          },
        })
        .then((res) => {
          let add = res.data.geocodes[0].location;
          this.community.communityLatitude = add.split(",")[0];
          this.community.communityLongitude = add.split(",")[1];
          console.log(this.community);
        })
        .catch((e) => {
          console.log(e);
        });
    },
    //修改小区信息
    editCom(data) {
      this.dialogFormVisible = true;
      this.community = data;
      this.setUpdate();
      console.log(this.community);
      this.address = [
        this.community.communityProvince,
        this.community.communityCity,
        this.community.communityDistrict,
      ];
    },
    //删除数据
    deleteCom(id) {
      console.log(id);
      //删除的提醒
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .post("/community/communityRemove", {
              communityId: id,
            })
            .then((res) => {
              // console.log(res);
              if (res.data.status == 200) {
                Message({
                  type: "success",
                  message: "删除成功！",
                });
              } else {
                Message({
                  type: "error",
                  message: "删除失败！",
                });
              }
              this.loading = true;
              this.get();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //页码容量大小改变
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.get();
    },
    //页码改变
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.get();
    },
  },
  watch: {
    date(newVal) {
      if (newVal != null) {
        this.date[0] = newVal[0];
        this.date[1] = newVal[1];
      } else {
        this.date = ["", ""];
      }
      this.get();
    },
    address() {
      this.community.communityProvince = this.address[0];
      this.community.communityCity = this.address[1];
      this.community.communityDistrict = this.address[2];
    },
  },
  mounted() {
    this.get();
  },
};
</script>
<template>
  <div>
    <div class="block">
      <span>小区名称:</span>
      <el-input
        style="width: 200px"
        v-model="communityName"
        placeholder="请输入"
        clearable
      ></el-input>
      <span>创建时间</span>
      <el-date-picker
        v-model="date"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
        value-format="yyyy-MM-dd HH:mm:ss"
      >
      </el-date-picker>
      <el-button type="primary" @click="get()" plain>搜索</el-button>
    </div>
    <el-row>
      <el-button type="primary" @click="dialogFormVisible = true" plain>
        新增小区</el-button
      >
      <!-- 弹窗添加数据 -->
      <el-dialog
        :title="communityMsg.title"
        :visible.sync="dialogFormVisible"
        @close="clear"
      >
        <el-form width="300px">
          <el-form-item label="小区名称" label-width="100">
            <el-input
              v-model="community.communityName"
              style="width: 200px"
              placeholder="请输入小区地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="所属区域" label-width="300">
            <div class="block">
              <el-cascader v-model="address" :options="city"></el-cascader>
            </div>
          </el-form-item>
          <el-form-item label="详细地址" label-width="100">
            <el-input
              v-model="community.communityAddress"
              style="width: 200px"
              placeholder="请输入详细地址"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="getTude">获取位置</el-button>
            <span v-show="community.communityLatitude"
              >{{ community.communityLatitude }},{{
                community.communityLongitude
              }}</span
            >
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="clear">取 消</el-button>
          <el-button type="primary" @click="add"> 确 定 </el-button>
        </div>
      </el-dialog>
    </el-row>
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%"
      height="520"
      stripe
      :header-cell-style="{ background: '#1890FF', color: 'white' }"
    >
      <el-table-column fixed prop="communityId" label="id"> </el-table-column>
      <el-table-column prop="communityName" label="名称"> </el-table-column>
      <el-table-column prop="communityAddress" label="位置"> </el-table-column>
      <el-table-column prop="communityUserCount" label="用户数量">
      </el-table-column>
      <el-table-column prop="communityShopCount" label="关联门店">
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            @click="setShopId(scope.row.communityId)"
            type="text"
            size="small"
            >查看关联门店</el-button
          >

          <el-button @click="editCom(scope.row)" type="text" size="small"
            >编辑小区</el-button
          >
          <el-button
            @click="deleteCom(scope.row.communityId)"
            type="text"
            size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <!-- <span class="demonstration">完整功能</span> -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </div>

    <el-dialog title="关联门店" :visible.sync="dialogTableVisible">
      <el-row>
        <span>名称：</span>
        <el-input
          v-model="shopSetData.shopName"
          placeholder="请输入"
          style="width: 200px"
        ></el-input>
        <el-button type="primary" @click="getShopList">搜索</el-button>
        <el-button
          type="primary"
          @click="(IsRighht_addShop = true), addShopGet()"
          >添加关联门店</el-button
        >
      </el-row>
      <el-table :data="shopListData" height="300px">
        <el-table-column prop="shopId" label="ID"></el-table-column>
        <el-table-column property="shopName" label="名称"></el-table-column>
        <el-table-column property="shopAddress" label="地址"></el-table-column>
        <el-table-column
          prop="shopOrderCount"
          label="订单数量"
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="deleteShop(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange_shop"
          :current-page.sync="shopSetData.pageNum"
          :page-size="shopSetData.pageSize"
          layout="total, prev, pager, next"
          :total="shopSetData.total"
        >
        </el-pagination>
      </div>
    </el-dialog>

    <el-dialog title="添加关联门店" :visible.sync="IsRighht_addShop">
      <el-row>
        <span>名称</span>
        <el-input
          v-model="addShopSet.shopName"
          placeholder="请输入"
          style="width: 200px"
        ></el-input>
        <el-button @click="addShopGet">搜索</el-button>
      </el-row>
      <el-table
        height="300px"
        ref="multipleTable"
        :data="addShopList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="shopId" label="ID"></el-table-column>
        <el-table-column property="shopName" label="名称"></el-table-column>
        <el-table-column property="shopAddress" label="地址"></el-table-column>
        <el-table-column
          prop="shopOrderCount"
          label="订单数量"
        ></el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange_addshop"
          :current-page.sync="addShopSet.pageNum"
          :page-size="addShopSet.pageSize"
          layout="total, prev, pager, next"
          :total="addShopSet.total"
        >
        </el-pagination>
        <el-row>
          <el-button @click="IsRighht_addShop = false">取消</el-button>
          <el-button @click="saveShops">保存</el-button>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
span,
.el-button {
  margin: 5px 10px;
}
</style>